<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>文档</title>
	<meta name='renderer' content='webkit'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
	<meta name='viewport'
				content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0'>
	<link rel='stylesheet' href='../../../layui/css/layui.css' media='all'>
	<style>
		body {
			padding: 40px;
		}

		.layui-card-header > span {
			font-weight: bold;
			font-size: 18px;
			color: #0C0C0C;
		}

		.layui-table, .layui-table-view, .layui-code {
			margin: 0;
		}

		.other li {
			margin-top: 10px;

		}
	</style>
</head>
<body>
<div class='layui-card'>
	<div class='layui-card-header'>
		<span>Doc</span>
	</div>

	<div class='layui-card-body'>
		<blockquote class="layui-elem-quote" style="margin-bottom: 0">全部扩展参数一览表</blockquote>
		<table id='test' lay-filter='test'></table>
		<blockquote class="layui-elem-quote" style="margin-bottom: 0;margin-top: 20px">对照查看</blockquote>
		<pre class='layui-code'>
			layui.openTable.render({
          elem: '#test'
          , id: '#test'
          , url: 'test.json'
          , toolbar: '#barDemo'
          , cols: [[
            {field: 'id', title: 'ID', sort: true}
            , {field: 'username', title: '用户名', edit: true}
            , {field: 'city', title: '城市', edit: true}
            , {title: '操作', toolbar: '#barDemo', width: 150}
          ]]

          //注：展开的列Items
          , openCols: [
            {
              field: 'sign', title: '签名', templet: function (item) {
                // 重新定义排版
                return ""
              }
            }
            , {
              field: 'wealth', title: '财富', onDraw: function (it, item) {
                // 使用默认风格排版 【左边title+右边值+下划线】
                return item['wealth'];
              }
            }
            , {field: 'experience', title: '积分'}
            , {field: 'classify', title: '职业'}
          ]

          //注：监听排序 {openTable}
          , sort: function (obj) {
            console.log(obj)
          }
          //注：0：同时只展开一项 1：一直展开不关闭之前  def：0 {openTable}
          , openType: 0

        });

		</pre>
		<blockquote class="layui-elem-quote" style="margin-bottom: 0;margin-top: 20px">其他说明</blockquote>
		<ul class="other">
			<li> 1、除去以上扩展参数,支持全部的layui.table 参数</li>
			<li> 2、码云仓库：https://gitee.com/Hbangmao/layui_extend_openTable</li>
			<li> 3、相关帖子1：https://fly.layui.com/jie/62195/</li>
			<li> 相关帖子2：https://fly.layui.com/jie/60060/</li>
			<li> 4、此项目长期维护，以码云仓库更新为准 。</li>
		</ul>
	</div>
</div>

<script src='../../../layui/layui.js'></script>
<script>
  layui.use(['table'], function () {
    layui.table.render({
      elem: '#test'
      , id: '#test'
      , cols: [[
        {field: 'parameter', title: '参数', width: 120}
        , {field: 'type', title: '类型', width: 120}
        , {field: 'doc', title: '描述'}
        , {field: 'demo', title: '示例值'}
      ]]
      , data: [
        {
          parameter: 'openCols',
          type: 'Array',
          doc: '展开列配置，类似 layui.table 【cols】',
          demo: "openCols: [ field: 'sign', title: '签名']"
        },
        {
          parameter: 'templet',
          type: 'Function',
          doc: '重新定义排版',
          demo: "templet:function(){}"
        },
        {
          parameter: 'onDraw',
          type: 'Function',
          doc: '当数据中的每列数据绘制前回调',
          demo: "onDraw:function(){}"
        },
        {
          parameter: 'openType',
          type: 'Number',
          doc: '0：同时只展开一项 1：一直展开不关闭之前',
          demo: ""
        },

        {
          parameter: '',
          type: '',
          doc: '',
          demo: ""
        },

        {
          parameter: 'openNetwork',
          type: 'Object',
          doc: '展开列的数据从网络接口获取',
          demo: "openNetwork:{}"
        },
        {
          parameter: 'reload',
          type: 'Boolean',
          doc: '是否支持加载出错 可点击重新加载 默认 true',
          demo: "true|false"
        }

      ]
    });


  });
</script>
</body>
</html>


